<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
</head>
<style type="text/css">
    img {
        border: medium double black;
        background-color: lightgrey;
        position: fixed;
    }

    #banana {
        /* z-index值越小，层叠顺序越靠后
            z-index默认值是0,设置为负值就会使p叠在banana上面
         */
        z-index: -1;
        top: 15px;
        left: 150px;
    }

    #apple {
        z-index: 2;
        top: 25px;
        left: 120px;
    }
</style>

<body>
    <!-- 可以使用float属性创建浮动盒，浮动盒会将元素的左边界或者右边界移动到包含块
    或另一个浮动盒的边界 -->
    <p>
        There are lots of different kinds of fruit - there are over 500 varieties
        of banana alone. By the time we add the countless types of apples, oranges,
        and other well-known fruit, we are faced with thousands of choides.
    </p>
    <p>
        One of the most interesting aspects of fruit is the variety available in
        each country. I live near London, in an area which is known for
        its apples.
    </p>
    <img id="banana" src="../images/banana.png" alt="small banana">
    <img id="apple" src="../images/apple.png" alt="small apple">
    <p>
        When travelling in Asia, I was struck by how many different kinds of banana were available - many of which had
        unique flavours and which were only avaiable within a small region.
    </p>
</body>

</html>